<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

  <head>
    <meta charset="utf-8" />
    <title>物联网管理平台</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-size: 1rem;
      }
      body {
        /* background: url(img/top_bg.png); */
        /* background-color: purple; */
        background-repeat: repeat;
        background-position: right;
      }
      #container {
        padding: 10px;
        margin: 0 auto;
        width: 80%;
        height: 100%;
      }
      .top {
        background-image: url(/static/img/top_left.gif);
        color: black;
        padding: 10px;
        font-size: 1.25rem;
        font-weight: bold;
      }
      .nav {
        /* background-image: url(./img/navigation.png); */
        background-color: rgb(0,109,240);
        padding: 1.25rem;
      }
      .conter {
        padding: 20px 7%;
        background-color: rgb(246,248,250);
      }
      .conter_up {
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: 0.2rem;
        padding-bottom: 20px;
      }
      .conter_middle table {
        border: 1px solid;
        text-align: center;
        width: 100%;
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        border: 2px solid black;
      }
      .conter_middle td,
      th {
        border: 1px solid #6e6767;
        height: 45px;
      }
      .conter_middle a {
        text-decoration: none;
        font-weight: bold;
      }
      .conter_down {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
      }
      .conter_down > * {
        margin-right: 8px;
      }
      .bu {
        background-color: white;
      }
      #xx {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <!--<div class="top">欢迎进入物联网管理平台</div>-->
      <!--<div class="nav">-->
        <!--<input type="button" name="" id="" value="主页" />-->
        <!--<input type="button" name="" id="" value="退出" />-->
      <!--</div>-->
      <div class="conter">
        <div class="conter_up">物联网设备信息列表</div>
        <!--<input type="button" name="" id="xx" value="添加" />-->
        <a href="/addpageDetailUI" target="_self">添加设备</a>

        <!--<input type="text" name="" id="" />-->
        <!--<input type="button" name="" id="xx" value="搜索" />-->
        <div class="conter_middle">
          <table cellspacing="0" cellpadding="0">
            <thead>
              <tr>
                <th>productKey</th>
                <th>设备名称</th>
                <th>设备别名</th>
                <!--<th>状态</th>-->
                <!--<th>创建日期</th>-->
                <!--<th>缴费金额</th>-->
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr th:each="devic:${deviceList}">
                <td th:text="${devic.productKey}"></td>
                <td th:text="${devic.deviceName}"></td>
                <td th:text="${devic.remarkName}"></td>
                <td><a  th:href="@{/device/deleteDevice(deviceName=${devic.deviceName})}">删除</a>
                  <!--<a href="#">修改</a>-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--<div class="conter_down">-->
          <!--<span>共5页</span>-->
          <!--<input type="button" name="" id="" value="上一页" />-->
          <!--<select name="">-->
            <!--<option value="1">1</option>-->
            <!--<option value="2">2</option>-->
            <!--<option value="3">3</option>-->
          <!--</select>-->
          <!--<input type="button" name="" id="" value="下一页" />-->
        <!--</div>-->
      </div>
    </div>
  </body>
</html>
